<template>
  <div>
    <h2>{{ name }}</h2>
    <h2>{{ age }}</h2>
    <ul>
      <li v-for="(item, index) in books" :key="index">{{ item }}</li>
    </ul>
    <!-- <button @click="changeAge(10)">年龄调整到20</button> -->
    <button @click="handlerAge({ num: 2 })">年龄调整到20</button>
    <button @click="asyncName({ name: '小狐狸' })">点击改变名字</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  name: "App",
  components: {},
  created() {
    console.log(this);
  },
  computed: {
    ...mapState(["name", "age", "books"]),
  },
  methods: {
    ...mapMutations(["handlerAge"]),
    ...mapActions(["asyncName"]),
    // changeAge(num){
    //   this.$store.commit("handlerAge",{num})
    // }

    // handLeNameAsync(name) {
    //   // 触发
    //   this.$store.dispatch("asyncName",{name})
    // }
  },
};
</script>

<style>
ul li {
  list-style: none;
}
</style>